<template>
	<view class="box">
		<uni-nav-bar  title="首页"  statusBar :border='false'></uni-nav-bar>
		<liu-customize-sel :address="ADS" class="tanchudizhi" ref="scroll" @change='chooseSuccess'></liu-customize-sel>
		<view class="inu">
			<view class="" style="display: flex;">
				<uni-icons type="search" size="22"></uni-icons>
				<input class="uni-input" placeholder="输入门店名字" v-model="params.keyword" @input="clearInput" />
			</view>
			<uni-icons type="clear" size="24" v-if="showClearIcon" @click="clearIcon"></uni-icons>
		</view>
		<view class="tiaojian">
			<view class="left">
				门店列表
			</view>
			<view class="right">
				<view class="right_box1" @click="openAddress">
					<span>{{params.shopCounty? params.shopCounty :'地区'}}</span>
					<uni-icons type="down" size="14"></uni-icons>
				</view>
				<view class="right_box2" @click="open">
					<span>{{shopname ? shopname :'门店标识'}}</span>
					<uni-icons type="down" size="14"></uni-icons>
				</view>
			</view>
		</view>
		<view class="hezi">
			<view class="list_box" v-for="(item,index) in list" :key="index">
				<view class="box1">
					<view class="left">
						<image :src="item.shopPicture" mode=""></image>
					</view>
					<view class="right">
						<view class="name">
							<span>{{item.shopName}}</span>
						</view>
						<view class="dizhi">
							{{item.shopCounty}}{{item.shopAddress}}
						</view>
						<view class="" style="display: flex;align-items: center;justify-content: space-between;">
							<view class="">
								<view class="dianhua">
									{{item.shopPerson}}{{item.shopPhone}}
								</view>
								<view class="biaoqian">
									<view class="weizhi">
										{{item.shopCity}}
									</view>
									<view class="biaoshi">
										{{item.shopTypeName}}
									</view>
								</view>
							</view>
							<view class="btns" @click="goxd(item)">
								下单
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<view class="kong" v-if="list.length == ''">
				<image class="img" src="../../static/tabbar/kong.png" mode=""></image>
				<view class="text">
					暂无数据
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area='false' @maskClick='close'>
			<view class="tanchu">
				<view class="top">
					<view class="wenzi">
						<span style="margin-right: -10%;">选择门店标识</span>
					</view>
					<uni-icons @click="close" type="closeempty" size="20"></uni-icons>
				</view>
				<view class="" v-for="(item,index) in shoplist" :key="index">
					<view class="hezi" @click="selectshop(item)">
						{{item.typeName}}
					</view>
				</view>
				<!-- <button>确定</button> -->
			</view>
		</uni-popup>
		<!-- <button @click="getlocat">123123</button> -->
		<uv-tabbar :value="0"  class="tab"></uv-tabbar>
	</view>
</template>

<script>
	import QQMapWX from "../../common/qqmapsdk/qqmap-wx-jssdk.min.js";
	import {
		getKlist,getshoplist
	} from '@/common/http.api.js';
	import { throttling, chattering } from '@/common/cont.js'
	export default {
		data() {
			return {
				ADS:'',
				shoplist:[],
				showClearIcon: false,
				value: 1,
				searchBarTop: 0, //搜索栏的外边框高度，单位px
				searchBarHeight: 0,
				list: [],
				address: '',
				params: {
					keyword:'',
					shopLongitude: '',
					shopLatitude: '',
					userName: '',
					shopName: '',
					shopTypeId: '',
					shopProvince: '',
					shopCity: '',
					shopCounty: '',
					pageNum: 1, //页码
					pageSize: 5, //每页大小
				},
				shopname:'',
			}
		},
		onLoad() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.searchBarTop = menuButtonInfo.top;
			this.searchBarHeight = menuButtonInfo.height;
			this.getlist()
		},
		methods: {
			goxd(item){
				uni.navigateTo({
					url:`/pages/dier/xiadan?item=${encodeURIComponent(JSON.stringify(item))}`,
				})
			},
			clearInput: function(event) {
				this.resout()
				this.params.keyword = event.detail.value
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
					chattering(()=>{
						this.list = []
						this.getlist()
					},500)
				} else {
					this.showClearIcon = false;
					this.getlist()
				}
			},
			clearIcon(){
				this.list = []
				this.resout()
				this.params.keyword = ''
				this.showClearIcon = false;
				this.getlist()
			},

			getlist() {
				getKlist(this.params).then(res => {
					this.list.push(...res.rows)
				})
			},
			//地址选择成功
			chooseSuccess(e) {
				this.resout()
				if (e.value == 0) {
					this.ADS = ''
					this.params.shopProvince = ''
					this.params.shopCity = ''
					this.params.shopCounty = ''
					this.list = []
					this.getlist()
				} else {
					this.ADS = e.value[2].label
					this.params.shopProvince = e.value[0].label
					this.params.shopCity = e.value[1].label
					this.params.shopCounty = e.value[2].label
					this.list = []
					this.getlist()
				}
			},
			openAddress() {
				this.$refs.scroll.open()
			},
			open() {
				getshoplist().then(res=>{
					if(res.code == 200){
						this.shoplist = res.rows
						uni.hideTabBar()
						this.$refs.popup.open('bottom')
					}
				})
			},
			close(){
				this.list = []
				this.resout()
				this.shopname = ''
				this.params.shopTypeId = ''
				uni.showTabBar()
				this.$refs.popup.close()
				this.getlist()
			},
			selectshop(item){
				this.list = []
				this.resout()
				this.shopname = item.typeName
				this.params.shopTypeId = item.id
				uni.showTabBar()
				this.$refs.popup.close()
				this.getlist()
			},
			resout(){
				this.params.pageNum = 1
				this.params.pageSize = 5
			},
			onReachBottom(){
				this.resout()
				this.params.pageNum ++ 
				this.getlist()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btns{
		width: 163rpx;
		height: 54rpx;
		background: linear-gradient(42deg, #5A4629 0%, #21150A 53%, #302315 100%);
		border-radius: 27rpx;
		text-align: center;
		line-height: 54rpx;
		color: #fff;
		font-size: 24rpx;
		margin-top: 40rpx;
	}
	.kong{
		margin-top: 80rpx;
		.img{
			width: 300rpx;
			height: 300rpx;
		}
		.text{
			color: #CCCCCC;
			text-align: center;
		}
	}
	.tanchu {
		background-color: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding-bottom: constant(safe-area-inset-bottom) !important;
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom) !important;
		button {
			width: 677rpx;
			height: 80rpx;
			background: linear-gradient(84deg, #24180D 0%, #594629 100%);
			border-radius: 40rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 33rpx;
			margin-top: 100rpx;
		}
		.hezi {
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1rpx solid #EEEEEE;
			margin-top: 30rpx;
			padding-bottom: 30rpx;
		}
		.top {
			width: 100%;
			border-bottom: 1px solid #EEEEEE;
			display: flex;
			align-items: center;
			.wenzi {
				width: 90%;
				height: 100rpx;
				text-align: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 30rpx;
				color: #070707;
				line-height: 100rpx;
				font-weight: bold;
			}
		}
	}

	.tanchudizhi {
		position: absolute;
		bottom: 0;
		width: 100%;
		background: #ffff;
		left: 0;
		border-radius: 24px 24px 0 0;
	}

	.box {
		background-color: #FFFFFF !important;
	}

	.hezi {
		padding-bottom: 40rpx;
	}

	.list_box {
		width: 690rpx;
		margin-top: 35rpx;
		.box1 {
			display: flex;
			align-items: center;

			.left {
				margin-right: 18rpx;
			}

			.right {
				line-height: 54rpx;
				width: 90%;

				.name {
					display: flex;
					justify-content: space-between;

					span {
						font-family: PingFang SC;
						font-weight: 800;
						font-size: 32rpx;
						color: #111111;
					}

					p {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 25rpx;
						color: #141414;
					}
				}

				.dianhua {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #919191;
				}

				.biaoqian {
					display: flex;

					view {
						background: linear-gradient(2deg, #FAF5EA 0%, #FAF3D5 100%);
						border-radius: 4rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #C18F36;
						margin-right: 20rpx;
						padding: 0rpx 10rpx;
						height: none;
					}
				}

				.dizhi {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #191919;
				}
			}

			image {
				width: 210rpx;
				height: 210rpx;
				border-radius: 10rpx;
			}

		}
	}

	.tiaojian {
		display: flex;
		width: 690rpx;
		margin-top: 45rpx;
		justify-content: space-between;
		align-items: center;
		.left {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #181818;
		}
		.right {
			display: flex;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #919191;
			.right_box1 {
				margin-right: 47rpx;
				max-width: 200rpx;
			}
			.right_box2 {
				width: 130rpx;
			}
		}
	}


	.inu {
		display: flex;
		width: 650rpx;
		height: 70rpx;
		background: #F6F6F6;
		border-radius: 35rpx;
		align-items: center;
		margin-top: 40rpx;
		justify-content: space-between;
		padding: 0 20rpx;

		input {
			width: 540rpx;
			margin-left: 20rpx;
		}
	}

	.icon {
		width: 43rpx !important;
		height: 43rpx !important;
	}
</style>